<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-08-28 16:36:36
-->
<template>
  <div class="map-container">
    <MiningMap       @ready="ready"
>
      <MiningTiandituLayer
        layerName="基础底图"
        :ak="key"
      ></MiningTiandituLayer>
      
    </MiningMap>
    <div class="coordinate" v-if="center.length === 2">
      当前坐标： 经度 {{ center[0].toFixed(4) }} 纬度 {{ center[1].toFixed(4) }}
    </div>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import { TiandituKey,CityCoordinates } from '@/config/config.js';
import MousePosition  from 'mining-map/Actions/MousePosition'
  
export default {
  name: 'MousePointerAction',
  title: '鼠标位置交互插件',
  parentTitle: '交互插件',
  components: {
    MiningMap,
    MiningTiandituLayer, 
  },
  data () {
    
 
    return {
      key: TiandituKey ,
      center: []
    }
  },
  methods: {
    ready ({map, vmap}) {
      
      const action = this.action = new MousePosition(map); 
      action.on('pointermove', this.handleMoveEnd)
      vmap.addActions(action) 
    }, 
    handleMoveEnd (evt) {
      console.log('handleMoveEnd', evt) //.center)
      this.center = evt.coordinate
    }
  }

}
</script>

<style lang="less">
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
  .coordinate {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 5px;
  }
} 
</style>